<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>分类列表</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/base.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/iconfont.css">
		<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
		<!-- 滚动条插件 -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/index/jquery.mCustomScrollbar.css">
		<script src="${pageContext.request.contextPath}/js/admin/jquery-ui-1.10.4.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/admin/jquery.mousewheel.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/admin/jquery.mCustomScrollbar.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/admin/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->
		

	</head>

	<body>
		<div class="cBody">
			<div class="console">
				<form class="layui-form" action="${pageContext.request.contextPath}/Grade/selectByNameLike" method="post">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="gradeName" placeholder="输入分类名称" autocomplete="off" class="layui-input">
						</div>
						<button class="layui-btn" lay-submit lay-filter="formDemo">检索</button>
					</div>
				</form>
			</div>
			
			<table class="layui-table">
				<thead>
					<tr>
						<th>分类名称</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="dataShow">
					<c:forEach items="${gradesAdmin}" var="grade">
						<tr>
							<td>${grade.gradeName}</td>
							<td>
								<a href="${pageContext.request.contextPath}/Grade/gradeUpdateUi?gradeId=${grade.gradeId}"><button class="layui-btn layui-btn-xs">修改</button></a>
								<a href="${pageContext.request.contextPath}/Grade/delete?gradeId=${grade.gradeId}"><button style="background-color: red; color: white;" class="layui-btn layui-btn-xs">删除</button></a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			
			<!-- layUI 分页模块 -->
			<div id="pages"></div>
			<div style="display: none;">
				<% int count = 0; %>
				<c:forEach items="${realGradesAdmin}">
					<% count++; %>
				</c:forEach>
				<span id="count"><%= count %></span>
			</div>
			<script>
				layui.use(['laypage', 'layer'], function() {
					var laypage = layui.laypage,
						layer = layui.layer;
					var allCount = $('#count').text();
				
					//总页数大于页码总数
					laypage.render({
					    elem: 'pages'
					    ,count: allCount
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
					    ,jump: function(obj){
					      console.log(obj)
					    }
					});
				});
			</script>
		</div>
		<script src="${pageContext.request.contextPath}/js/admin/gradeList.js"></script>
	</body>

</html>